<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <title>task6</title>
        <meta charset="UTF-8">
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
    <header><span class="left"><span>ife.baidu.com</span></span><span class="right">2017.09</span></header>
    <main>
        <section>
         <article id="art1">
             <div class="pic1">
             <div class="coverLeft"></div>
             <div class="coverRight"></div>
            <img src="picture_pc1.jpg" alt="picture_pc1.jpg" id="pc1">
            </div>
            <div id="about">
                <p id="AB">about<br>technologe</p>
                <p id="Ab">About technologe about technologe about technologe</p>
                <p id="logo7">700</p>
                <div class="logo3">3.2</div>
                <div class="logo3">
                    <p class="logo3 logocs" >css</p>
                    <p class=" logo3 logocss">cssscssscs</p>
                </div>
            </div>
         </article>
         <article class="art-inline what">
             <h3>What</h3>
             <p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前</p>
         </article>
         <article class="art-inline when">
             <h3>When</h3>
             <p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前</p>
         </article> 
         <article class="art-inline how">
             <h3>How</h3>
             <p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前</p>
             <p>What----------<span class="per">40%</span></p>
             <p>What----------<span class="per">30%</span></p>
             <p>What----------<span class="per">30%</span></p>
            </article>  
        </section>
        <section>
            <article class="art2">
                <h2><span>THE</span> EECHNOLOGE OF FORONT</h2>
                <h3>前端技术领域</h3>
                <p><span>前</span>端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前
                <img src="picture_pc3.jpg" alt="picture_pc3.jpg" id="pc3"> 
                前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前</p>
            </article>
            <article class="art3">
                <div class="pic2">
                    <div class="coverBottom"><p><span>前端技术</span>前端技术前端技术</p></div>
                <img src="picture_pc2.jpg" alt="picture_pc2.jpg" id="pc2">
                </div>
                <div class="art33">
                <ul>
                    <li><span class="triangle"></span>前端前端前端前端前端前端........<span>前端</span></li>
                    <li><span class="triangle"></span>前端前端前端前端...........<span>端前端</span></li>
                    <li><span class="triangle"></span>前端前端前端前端前端前端前端.............<span>前端</span></li>
                </ul>
                <div class="dis-L">
                    <p id="zero">0</p>
                    <div>
                    <h2>ONE TWO THREE FOUR FIVE</h2>
                    <p> hello world hello world hello world</p>
                    </div>
                </div>
                <p class="dis-R"><span>“</span>world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world <span>”</span></p> 
             </div>
            </article>
        </section>
    </main>
    <footer class="rigth">ife.baidu.com</footer>
    </body>
</html>